<template>
  <div>
    <div ref="radioTags" class="RadioTags">
      <ul
        :style="{
          textAlign: align,
          whiteSpace: isScroll ? 'nowrap' : 'normal'
        }"
      >
        <li v-for="(item, index) in tags" :key="index" :class="isActive(item, index)" :style="{ background: item.status === '无' ? 'rgba(0,0,0,0.1)' : '' }" @click="changeTags(item, index)">
          {{ item[fieldName] }}
        </li>
      </ul>
    </div>
    <div v-show="subTags && subTags.length > 0" ref="subRadioTags" class="subRadioTags">
      <ul :style="{ textAlign: align }">
        <li v-for="(subItem, subIndex) in subTags" :key="subIndex" :class="{ active: subActive === subIndex }" :style="{ background: subItem.status === '无' ? 'rgba(0,0,0,0.1)' : '' }" @click="changeTags(subItem, subIndex)">
          {{ subItem[subFieldName] }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RadioTags',
  props: {
    value: {
      type: [Number, String],
      default: 0
    },
    subValue: {
      type: [Number, String],
      default: 0
    },
    list: {
      type: Array,
      default: () => []
    },
    subList: {
      type: Array,
      default: () => []
    },
    fieldName: {
      type: String,
      default: 'label'
    },
    subFieldName: {
      type: String,
      default: 'subTitle'
    },
    align: {
      type: String,
      default: 'left'
    },
    isScroll: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tags: [],
      subTags: [],
      active: 3,
      subActive: 0,
      containerWidth: 0
    }
  },
  computed: {
    isActive() {
      return (item, index) => {
        return {
          active: this.active === index
        }
      }
    }
  },
  watch: {
    value: {
      deep: true,
      handler(newVal) {
        console.log(newVal)
        this.active = newVal
        this.$nextTick(() => {
          this.initTags('radioTags', newVal)
        })
      }
    },
    subValue(newVal) {
      this.subActive = newVal
      this.$nextTick(() => {
        this.initTags('subRadioTags', newVal)
      })
    },
    list(newVal) {
      this.tags = newVal
      this.$nextTick(() => {
        // this.initTags('radioTags', newVal)
      })
    },
    subList(newVal) {
      this.subTags = newVal
      this.$nextTick(() => {
        // this.initTags('subRadioTags', newVal)
      })
    }
  },
  created() {
    this.active = this.value
    this.subActive = this.subValue
    this.tags = this.list
    this.subTags = this.subList
  },
  mounted() {
    this.$nextTick(() => {
      this.initTags('radioTags', this.active)
      this.initTags('subRadioTags', this.subActive)
    })
  },
  methods: {
    changeTags(item, index) {
      console.log('item', item)
      if (item.status !== '无') {
        if (item[this.fieldName]) {
          this.active = index
          this.initTags('radioTags', index)
        } else {
          this.subActive = index
          this.initTags('subRadioTags', index)
        }
        this.$emit('change', {
          index: index,
          isSub: !!item[this.subFieldName],
          item: item
        })
      }
    },
    initTags(name, active) {
      this.containerWidth = this.$refs[name].clientWidth
      const tagItemArr = []
      const tagItems = this.$refs[name].getElementsByTagName('li')
      Array.prototype.slice.call(tagItems).forEach((li) => {
        tagItemArr.push(li.clientWidth)
      })
      let beforeCurrentWidth = 0
      let currentWidth = 0
      for (const i in tagItemArr) {
        if (i < active) {
          // 20来源于每个item的margin-left
          beforeCurrentWidth += tagItemArr[i] + 20
        } else if (i === active) {
          currentWidth = tagItemArr[i]
        } else {
          break
        }
      }
      const scrollLeft = beforeCurrentWidth - 20 + currentWidth / 2 - this.containerWidth / 2
      this.$refs[name].scrollLeft = scrollLeft
    }
  }
}
</script>

<style lang="scss">
.RadioTags,
.subRadioTags {
  width: auto;
  height: auto;
  overflow: hidden;
  overflow-x: auto;
  line-height: 0;

  scroll-behavior: auto;
  scroll-behavior: smooth;

  &::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  ul {
    min-width: 100%;
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    width: auto;
    text-align: center;
    font-size: 0;

    li {
      display: inline-block;
      height: 48px;
      font-size: 26px;
      padding: 0 25px;
      box-sizing: border-box;
      border-radius: 24px;
      border: solid 1px #13a9ff;
      line-height: 46px;
      margin-right: 15px;
      transition: all 0.3s;
      background: #fff;
      color: #13a9ff;
    }

    // li:first-child {
    //   margin-left: 0;
    // }

    li.active {
      border-color: #13a9ff;
      background-image: linear-gradient(30deg, #13a9ff 0%, #64ebfb 100%), linear-gradient(#00ff00, #00ff00);
      background-blend-mode: normal, normal;
      color: #fff;
    }
  }
}

.subRadioTags {
  padding: 10px;
  ul {
    white-space: nowrap;
    li {
      height: 40px;
      line-height: 40px;
      font-size: 20px;
    }
  }
}
</style>
